<template>
    <div id="add-edit-model">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            :before-close="handleClose"
            :destroy-on-close="true"
            :fullscreen="true"
        >

            <div class="form-s">
                <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="140px" :rules="rules">
                    <el-row>
                        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                            <el-form-item label="风险分析单元名称" prop="v_Name">
                                <el-input disabled readonly v-model="ruleForm.v_Name" placeholder="请输入风险分析单元名称" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                            <el-form-item label="责任人" prop="v_ResponsibleMan">
                                <el-input disabled readonly v-model="ruleForm.v_ResponsibleMan" placeholder="请输入责任人" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                            <el-form-item label="所属风险分区" prop="v_RiskPartitionName">
                                <el-select 
                                    class="m-2" 
                                    placeholder="请选择所属风险分区" 
                                    v-model="ruleForm.v_RiskPartitionName"
                                    @change="areaChange"
                                    filterable
                                    value-key="id"
                                    :disabled="!isView"
                                    :readonly="!isView"
                                >
                                    <el-option
                                        v-for="item in areaOption"
                                        :key="item.id"
                                        :label="item.v_Name"
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                            <el-form-item label="风险评价方法" prop="d_PlanDate">
                                <el-select 
                                    class="m-2" 
                                    placeholder="请选择风险评价方法" 
                                    v-model="ruleForm.v_EvaluationMethod" 
                                    filterable
                                    :disabled="!isView"
                                    :readonly="!isView"
                                >
                                    <el-option
                                        v-for="item in typeOption"
                                        :key="item.id"
                                        :label="item.value"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                            <el-form-item label="风险分析单元类型" prop="d_PlanDate">
                                <el-select 
                                    class="m-2" 
                                    placeholder="请选择风险分析单元类型" 
                                    v-model="ruleForm.v_TypeName" 
                                    filterable
                                    @change="genreChange"
                                    value-key="value"
                                    :disabled="!isView"
                                    :readonly="!isView"
                                >
                                    <el-option
                                        v-for="item in genreOption"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                            <el-form-item label="责任部门" prop="v_ResponsibleDepName">
                                <el-cascader 
                                    v-model="ruleForm.l_ResponsibleDepId"
                                    :options="orgOption" 
                                    :props="orgProps" 
                                    @change="orgChange"
                                    filterable
                                    clearable 
                                    :disabled="!isView"
                                    :readonly="!isView"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                            <el-form-item label="风险等级">
                                <el-select 
                                    class="m-2" 
                                    placeholder="请选择风险等级" 
                                    v-model="ruleForm.v_RiskLevelName" 
                                    @change="levelChange"
                                    filterable
                                    value-key="value"
                                    :disabled="!isView"
                                    :readonly="!isView"
                                >
                                    <el-option
                                        v-for="item in levelOption"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="con-s">
                <!-- 风险事件列表 -->
                <div style="width: 20%; height: 100%; display: flex;flex-direction: column;">
                    <el-button v-if="isView" @click="docClick(1)" icon="ele-Plus"> 新增风险事件 </el-button>
                    <ul class="area-ul">
                        <li class="area-l" v-for="item in docInfo" :key="item.id" @click="liClick(item)" :class="{ 'active': selectedItem === item.id }">
                            <div v-if="isView" class="btn-s">
                                <span style="color: #E6A23C;">操作：</span>
                                <el-button style="padding-left: 0px;margin-right: 5px;" @click="editHandle(1,item)" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                <el-button style="margin-left: 0px;padding-left: 0px;" @click="deleteHandle(1,item)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                            </div>
                            <span>{{item.v_Name}}</span>
                        </li>
                    </ul>
                </div>

                <div style="width: 78%; height: 100%;">
                    <!-- 风险管控清单列表 -->
                    <div style="width: 100%;height: 60%;overflow: hidden;">
                        <el-button v-if="isView" style="margin-bottom: 10px" @click="docClick(2)" icon="ele-Plus"> 新增管控清单 </el-button>
                        <el-table :data="list" class="set-tab" style="width: 100%;height: 78%;" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                            <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_Discriminate" label="辨析范围分类"  align="center" />
                            <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_HazardousFactors" label="危害因素"  align="center" />
                            <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_DCMeasureClassName" label="管控措施分类"  align="center" />
                            <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_DCMeasure" label="管控措施"  align="center" />
                            <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_CheckContent" label="隐患排查内容"  align="center" />
                            <el-table-column width="260" label="操作" align="center" fixed="right">
                                <template #default="scope">
                                    <div class="operate-s">
                                        <el-button @click="viewHandle(scope.row)" class="icon-e" :class="{ 'wt-active': wtItem === scope.row.id }" icon="ele-View" size="small" text type="success">查看问题清单</el-button>
                                        <el-button v-if="isView" @click="editHandle(2,scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                        <el-button v-if="isView" @click="deleteHandle(2,scope.row,getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- <div style="height: 30px;margin-top: 10px;" class="hr-flex-start">
                            <el-pagination
                                v-model:currentPage="pageNo"
                                v-model:page-size="pageSize"
                                :total="totalRows"
                                :page-sizes="[10, 20, 50, 100]"
                                small
                                background
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                layout="total, sizes, prev, pager, next, jumper"
                            />
                        </div> -->
                    </div>

                    <!-- 风险问题清单列表 -->
                    <div style="width: 100%;height: 40%;overflow: hidden;">
                        <el-button v-if="isView" style="margin-bottom: 10px" @click="docClick(3)" icon="ele-Plus"> 新增问题清单 </el-button>
                        <el-table class="set-tab-s" :data="issueList" style="width: 100%;height: 76%;" border v-loading="issueLoading" element-loading-background="rgba(0, 0, 0, 0.5)">
                            <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_Problem" label="问题描述"  align="center" />
                            <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_HiddenDangerClass" label="隐患分类"  align="center" />
                            <el-table-column v-if="isView" width="180" label="操作" align="center" fixed="right">
                                <template #default="scope">
                                    <div class="operate-s">
                                        <el-button @click="editHandle(3,scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                        <el-button @click="deleteHandle(3,scope.row,getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <template #footer>
                <el-button @click="cancelUseClick">关闭</el-button>
            </template>
        </el-dialog>
        <!-- 新增风险事件 -->
        <AddEditRiskControl
            :repairInfo="addInfo"
            :isUseDialog="addDialog"

            @cancelAddClick="cancelAddClick"
            @controlAddClick="controlAddClick"
        />
        <!-- 新增风险管控清单 -->
        <AddEditInventory
            :inventoryInfo="inventoryInfo"
            :inventoryDialog="inventoryDialog"
            @updateData='getData'
            @cancelInventoryClick="cancelInventoryClick"
            @controlInventoryClick="controlInventoryClick"
        />
        <!-- 新增问题清单 -->
        <IssueList
            :listInfo="listInfo"
            :listDialog="listDialog"
            @cancelListClick="cancelListClick"
            @controlListClick="controlListClick"
        />
    </div>
</template>
<script lang="ts">
/*** 定义接口基础数据类型 */
interface formType {
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {
    id?: Number,
    v_Name: String, // 风险分析单元名称
    n_Type: Number, // 风险分析单元类型
    v_TypeName: String, // 风险分析单元分类名称
    n_RiskLevel: Number, // 风险等级
    v_RiskLevelName: String, // 风险等级
    v_EvaluationMethod: String, // 风险评价方法
    l_ResponsibleDepId: Number, // 责任部门ID传给后端接口
    v_ResponsibleDepName: any, // 责任部门名称用于显示
    v_ResponsibleMan: String, // 责任人
    l_RiskPartitionId: Number, // 所属风险分区
    v_RiskPartitionName: String, // 所属风险分区名称
}

import { defineComponent, ref , reactive, computed , watch , toRefs , toRaw, watchEffect } from 'vue';
import { ElButton, ElDialog , ElMessageBox , ElMessage, FormInstance, FormRules } from 'element-plus';
import { 
    SMSDCListPage , 
    SMSDCEventList , 
    SMSDCEventDelete , 
    SMSDCListDelete , 
    SMSDCSafetyProblemList , 
    SMSDCSafetyProblemDelete ,
    sysDictDataList ,
    SMSDCAnalysisUnitUpdate , 
    SMSDCRiskPartitionList,
    SMSDCAnalysisUnitSnapshotEventSnapshotList,
    SMSDCAnalysisUnitSnapshotDCListSnapshotList,
    SMSDCAnalysisUnitSnapshotDCSafetyProblemSnapshotList,
} from '/@/api/centerControl/sms';
import AddEditRiskControl from './add-edit-RiskControl.vue';
import AddEditInventory from './add-edit-inventory.vue';
import IssueList from './issue-list.vue';
import getTableData from '/@/utils/getTableData';
import { sysOrgTree } from '/@/api/centerControl/pubilc';

export default defineComponent( {
    name: 'add-edit-model',
    components: {
        AddEditRiskControl,
        AddEditInventory,
        IssueList,
    },
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        },
        isView: {
            type: Boolean,
            default: true
        },
        needUrl: {
            type: Function,
            default: () => {}
        },
    },
    setup(props,ctx){
        let searchObj:any = reactive({
            l_EventId: -1,
            l_EventSnapshotId: -1,
        });
        const titleCon = ref();
        const addInfo = ref();
        const addDialog = ref();
        const inventoryInfo = ref();
        const inventoryDialog = ref();
        const listInfo = ref('');
        const listDialog = ref(false);
        const docInfo = ref();
        const selectedItem = ref();
        const wtItem = ref();
        let isActive = false;
        let gkId = 0;
        let wtId = 0;
        const issueList = ref();
        const issueLoading = ref(false);
        const { list } = toRefs(getTableData(props.needUrl,{},searchObj));
        const ruleFormRef = ref(null);
        
        const typeOption = ref();
        const orgOption = ref();
        const areaOption = ref();

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            ruleForm: {} as ruleFormType
        });

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            // 分区名称
            v_Name: [
				{ required: true, message: '请输入风险分析单元名称', trigger: 'blur' },
			],
            // 责任部门
            v_ResponsibleDepName: [
				{ required: true, message: '请选择责任部门', trigger: 'change' },
			],
            // 责任人
            v_ResponsibleMan: [
				{ required: true, message: '请输入责任人', trigger: 'change' },
			],
            // 风险评价方法
            v_EvaluationMethod: [
                { required: true, message: '请选择风险评价方法', trigger: 'change' },
            ],
            // 所属风险分区
            v_RiskPartitionName: [
                { required: true, message: '请选择所属风险分区', trigger: 'change' },
            ],
            // 风险分析单元类型
            v_TypeName: [
                { required: true, message: '请选择风险分析单元类型', trigger: 'change' },
            ],
        });

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    let param = toRaw(state.ruleForm);
                    let res:any = await SMSDCAnalysisUnitUpdate(param);
                    if(res.success) return
                }else{
                    console.log('error submit!')
					return false
                }
            })
        }

        /*** getTree 获取组织架构树 */
        const getTree = async() => {
            let param = {}
            let res: any = await sysOrgTree(param);
            if(res.success) orgOption.value = res.data;
        }

        /*** getDictFun 获取类型字典值 */
        const getDictFun = async() => {
            let param: any = {};
            param.TypeCode = 'SmsEvaluate';
            let res: any = await sysDictDataList(param);
            if(res.success) typeOption.value = res.data;

            let params:any = {};
            let ras: any = await SMSDCRiskPartitionList(params);
            if(ras.success) areaOption.value = ras.data;
        }

        /*** areaChange 风险分区改变事件 */
        const areaChange = (val: any) => {
            state.ruleForm.l_RiskPartitionId = val.id;
            state.ruleForm.v_RiskPartitionName = val.v_Name;
        }

        /*** orgChange 选择部门改变事件 */
        const orgChange = (val: any) => {
            if(val){
                let len = val.length;
                state.ruleForm.l_ResponsibleDepId = val[len - 1];
                state.ruleForm.v_ResponsibleDepName = val[len - 1];
            }
        }

        /*** getSjList 获取风险事件列表 */
        const getSjList = async(id: Number) => {
            let res: any;
            if(props.isView) res = await SMSDCEventList({ l_AnalysisUnitId: id });
            else res = await SMSDCAnalysisUnitSnapshotEventSnapshotList({ l_AnalysisUniSnapshotId: id });
            console.log(res.data,'res.data')
            if(res.success && res.data.length !== 0) {
                let len = res.data.length;
                if(isActive){
                    selectedItem.value = res.data[len-1].id;
                    props.isView ? searchObj.l_EventId = res.data[len-1].id : searchObj.l_EventSnapshotId = res.data[len-1].id;
                    gkId = res.data[len-1].id;
                }else{
                    selectedItem.value = res.data[0].id;
                    props.isView ? searchObj.l_EventId = res.data[0].id : searchObj.l_EventSnapshotId = res.data[0].id;
                    gkId = res.data[0].id;
                }
                docInfo.value = res.data;
            };
        }

        watchEffect(() => {
            issueLoading.value = true;
            issueList.value = [];
            wtId = 0;
            let listData = list.value;
            if(listData.length !== 0){
                getWtList(toRaw(listData)[0].id);
                wtItem.value = toRaw(listData)[0].id;
                wtId = toRaw(listData)[0].id;
            }else{
                issueLoading.value = false;
            }
        })
        /*** getWtList 获取风险问题清单列表 */
        const getWtList = async(id: Number) => {
            let res: any;
            if(props.isView) res = await SMSDCSafetyProblemList({ l_SMSDCListId: id });
            else res = await SMSDCAnalysisUnitSnapshotDCSafetyProblemSnapshotList({ L_SMSDCListSnapshotId: id });
            if(res.success) issueList.value = res.data;
            issueLoading.value = false;
        }

        /*** cancelAddClick 风险事件取消事件 */
        const cancelAddClick = () => {
            addDialog.value = false;
        }

        /*** controlAddClick 新增风险事件提交事件 */
        const controlAddClick = () => {
            isActive = true;
            addDialog.value = false;
            getSjList(JSON.parse(props.repairInfo).id);
        }

        /*** cancelInventoryClick 风险管控清单取消事件 */
        const cancelInventoryClick = () => {
            inventoryDialog.value = false;
        }

        /*** controlInventoryClick 风险管控清单提交事件 */
        const controlInventoryClick = () => {
            inventoryDialog.value = false;
        }

        /*** cancelListClick 问题清单取消事件 */
        const cancelListClick = () => {
            listDialog.value = false;
        }
        /*** controlListClick 问题清单提交事件 */
        const controlListClick = () => {
            issueLoading.value = true;
            getWtList(wtId);
            listDialog.value = false;
        }

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelEditClick');
        }

        /*** liClick li点击事件 */
        const liClick = (val: any) => {
            selectedItem.value = val.id;
            props.isView ? searchObj.l_EventId = val.id : searchObj.l_EventSnapshotId = val.id;
            gkId = val.id;
        }

        /*** docClick 新增事件 */
        const docClick = (num: number) => {
            let setObj: any = {};
            switch(num){
                case 1:
                    // 新增风险事件列表
                    console.log('新增风险事件列表')
                    setObj.id = JSON.parse(props.repairInfo).id;
                    setObj.status = 'add';
                    addInfo.value = JSON.stringify(setObj);
                    addDialog.value = true;
                    break;
                case 2:
                    // 新增管控清单列表
                    console.log('新增管控清单列表')
                    setObj.id = gkId;
                    setObj.status = 'add';
                    inventoryInfo.value = JSON.stringify(setObj);
                    inventoryDialog.value = true;
                    break;
                case 3:
                    // 新增问题清单列表
                    console.log('新增问题清单列表')
                    setObj.id = wtId;
                    setObj.status = 'add';
                    listInfo.value = JSON.stringify(setObj);
                    listDialog.value = true;
                    break;
            }
        }

        /*** viewHandle 查看问题清单点击事件 */
        const viewHandle = (val: any) => {
            issueLoading.value = true;
            wtItem.value = val.id;
            wtId = val.id;
            getWtList(val.id);
        }

        /*** editHandle 编辑点击事件 */
        const editHandle = (num: number, val: any) => {
            let setObj: any = {};
            switch(num){
                case 1:
                    setObj.info = val;
                    setObj.status = 'edit';
                    addInfo.value = JSON.stringify(setObj);
                    addDialog.value = true;
                    break;
                case 2:
                    setObj.info = val;
                    setObj.status = 'edit';
                    inventoryInfo.value = JSON.stringify(setObj);
                    inventoryDialog.value = true;
                    break;
                case  3:
                    setObj.info = val;
                    setObj.status = 'edit';
                    listInfo.value = JSON.stringify(setObj);
                    listDialog.value = true;
                    break;
            }
        }

        /*** deleteHandle 删除事件 */
        const deleteHandle = (num: number, val: any,uploadFun?: Function) => {
            switch(num){
                case 1:
                    deteleFun(num,val.id);
                    break;
                case 2:
                    deteleFun(num,val.id,uploadFun);
                    break;
                case 3:
                    deteleFun(num,val.id);
            }
        }
        /*** deteleFun 删除函数 */
        const deteleFun = async(num: number, id: number ,uploadFun?: Function | any) => {
            ElMessageBox.confirm('请确定删除此条数据？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : id}
                try {
                    let res:any;
                    switch(num){
                        case 1:
                            res = await SMSDCEventDelete(param);
                            if(res.success) getSjList(JSON.parse(props.repairInfo).id);
                            break;
                        case 2:
                            res = await SMSDCListDelete(param);
                            if(res.success) uploadFun();
                            break;
                        case 3:
                            res = await SMSDCSafetyProblemDelete(param);
                            if(res.success) {
                                issueLoading.value = true;
                                getWtList(wtId);
                            }
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                titleCon.value = '创建风险事件';
                isActive = false;
                docInfo.value = [];
                list.value = [];
                issueList.value = [];
                searchObj.l_EventId = -1;
                searchObj.l_EventSnapshotId = -1;
                let getInfo = JSON.parse(props.repairInfo);
                getSjList(getInfo.id);
                getDictFun();
                getTree();
                state.ruleForm = getInfo;
            }
        })

        watch(() => state.ruleForm, (newVal,oldVal) => {
            if(Object.keys(oldVal).length !== 0){
                if(ruleFormRef.value) submitForm(ruleFormRef.value);
            }
        }, { deep: true })

        /*** genreChange 风险分析单元类型选择事件 */
        const genreChange = (val: any) => {
            state.ruleForm.n_Type = val.value;
            state.ruleForm.v_TypeName = val.label;
        }

        /*** levelChange 风险等级选择事件 */
        const levelChange = (val: any) => {
            state.ruleForm.n_RiskLevel = val.value;
            state.ruleForm.v_RiskLevelName = val.label;
        }

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog;
        })

        return {
            ...getTableData(props.needUrl,{},searchObj, false),
            ...toRefs(state),
            rules,
            handleClose,
            cancelUseClick,
            titleCon,
            isUseDialog,
            listInfo,
            listDialog,
            addInfo,
            addDialog,
            cancelAddClick,
            controlAddClick,
            inventoryInfo,
            inventoryDialog,
            cancelInventoryClick,
            controlInventoryClick,
            cancelListClick,
            controlListClick,
            docInfo,
            selectedItem,
            liClick,
            docClick,
            editHandle,
            deleteHandle,
            issueList,
            issueLoading,
            viewHandle,
            wtItem,

            
            typeOption,
            orgProps: { checkStrictly: true , label: 'title', value: 'id', children: 'children' },
            orgOption,
            orgChange,
            genreOption: [
                {label: '设备类', value: 0},
                {label: '作业活动类', value: 1},
            ],
            genreChange,
            levelOption: [
                {label: '低风险', value: 0},
                {label: '一般风险', value: 1},
                {label: '较大风险', value: 2},
                {label: '重大风险', value: 3},
            ],
            levelChange,
            areaChange,
            areaOption,
            ruleFormRef,
            isView: props.isView,
        }
    },
} )
</script>
<style scoped lang="scss">
:deep(.el-dialog__body){
    height: calc(100vh - 110px);
    max-height: none!important;
    overflow-y: hidden;
}
.form-s{
    height: 20%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px;
    overflow-y: auto;
    width: 100%;
    margin-bottom: 10px;
}
.con-s{
    width: 100%; 
    display: flex;
    justify-content: space-between;
    height: 80%;
    overflow: hidden;
    // overflow-y: auto;
    // border: 1px solid red;
}
.hr-flex-start{
    justify-content: flex-end !important;
}
.set-tab{
    // height: 14vw;
    overflow-y: auto;
    // border: 1px solid green;
    :deep(.el-table__body-wrapper){
        overflow-y: auto;
    }
}
.set-tab-s{
    // height: 8vw;
    overflow-y: auto;
    // border: 1px solid green;
    :deep(.el-table__body-wrapper){
        overflow-y: auto;
    }
}
.wt-active{
    color: #E6A23C !important;
}
.area-ul {
    list-style: none;
    padding: 10px 0;
    overflow: auto;
    max-height: 90%;
    li {
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        // text-align: center;
        padding: 20px 0 20px 10px;
    }
}
:deep(.el-select-dropdown__item){
    padding: 0px !important;
}
:deep(.el-scrollbar__wrap){
    overflow: auto;
    height: 96%;
}
.active{
    background: rgba(0,0,0,.2)!important;
}
.area-l:hover{
    background: rgba(0,0,0,.2)!important;
}
:deep(.el-cascader){
    width: 100%;
}
:deep(.el-select){
    width: 100%!important;
}
:deep(.el-input){
    width: 100%;
}
</style>